<template>
  <div class="list-common-tab">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-input
          v-model="search"
          placeholder="请输入检索内容"
          @keyup.enter="handleSearch"
          input-style="padding-right:30px"
        />
      </el-col>
      <el-col :span="6" class="operation-container">
        <el-button type="primary" @click="handleSearch">检索</el-button>
        <el-button type="info" @click="handleClear">清空</el-button>
        <el-button type="primary" @click="handleCreateForm">新建</el-button>
      </el-col>
    </el-row>
    <div class="star-table-container">
      <el-table
        :data="dataList"
        :stripe="stripe"
        :max-height="listHeight"
      >
        <el-table-column prop="privilegeName" label="权限名称" />
        <el-table-column prop="directory" label="类型" width="120">
          <template #default="scope">
            <div v-if="scope.row.directory === '1'">文件夹</div>
            <div v-else>权限</div>
          </template>
        </el-table-column>
        <el-table-column prop="showOrder" label="排序" width="80"/>
        <el-table-column prop="op" align="center" label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" @click="handleFormManager(scope)" >操作</el-button>
            <el-popconfirm :title="showContent(scope)" width="200" @confirm="handleRemoveData(scope)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="star-table-pagination">
      <el-pagination
        background
        :total="listTotal"
        :layout="pageOperate"
        :default-page-size="size"
        :page-sizes="listPageSizes"
        v-model:page-size="pageSize"
        @size-change="handleSizeChange"
        v-model:current-page="currentPage"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      center
      draggable
      title="权限管理"
      destroy-on-close
      v-model="visibleForm"
      :close-on-click-modal="false"
    >
      <privilege-form :id="formId" :fid="props.fid" @close-dialog="closeDialog" @reload-data="reloadData" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import privilegeForm from '@/views/system/privilege/PrivilegeForm'
import { ref, onMounted, watch, computed } from 'vue'
import { stripe, size, pageOperate, listPageSizes } from '@/config/list'
import { loadDataListByFid, deleteData } from '@/api/system/privilege/PrivilegeManager'

import '@/style/list.less'

const search = ref('')
const formId = ref('')
const dataList = ref([])
const listTotal = ref(0)
const pageSize = ref(size)
const currentPage = ref(1)
const visibleForm = ref(false)
const emit = defineEmits(['change-data'])
const props = defineProps({ fid: String, id: String })

const listHeight = computed(() => {
  return 'calc(100vh - 295px)'
})

const handleSearch = () => {
  currentPage.value = 1
  loadListData()
}

const handleClear = () => {
  currentPage.value = 1
  search.value = ''
  loadListData()
}

const handleFormManager = (scope) => {
  formId.value = scope.row.id
  visibleForm.value = true
}

const handleRemoveData = (scope) => {
  deleteData(scope.row.id).then(() => {
    ElMessage.success('删除成功！')
    reloadData()
  }).catch(error => {
    ElMessage.error(error.message)
  })
}

const handleCreateForm = () => {
  formId.value = ''
  visibleForm.value = true
}

const closeDialog = () => {
  visibleForm.value = false
}

const reloadData = () => {
  loadListData()
  emit('reload-data')
}

const showContent = computed(() => (scope) => {
  return `是否要删除${scope.row.privilegeName}？`
})

const loadListData = () => {
  loadDataListByFid({
    fid: props.fid,
    current: currentPage.value,
    pageSize: pageSize.value,
    search: search.value
  }).then(data => {
    const { list, total } = data
    dataList.value = list
    listTotal.value = total
  })
}

const handleSizeChange = () => {
  loadListData()
}

const handleCurrentChange = () => {
  loadListData()
}

watch(
  () => props.fid,
  () => {
    currentPage.value = 1
    search.value = ''
    loadListData()
  }
)

onMounted(() => {
  loadListData()
})

</script>
